<template>
	<view class="page-search">
		<view class="search-header df-ac">
			<image src="../../static/imgs/back.png" mode="" class="icon-back" @click="goBack"></image>
			<view class="search-box df-cc">
				<image src="../../static/imgs/i-search.png" mode="" class="icon-search posy-c"></image>
				<input type="text" name="keyword" v-model="keyword" placeholder="搜索活动" />
				<view class="btn-search" @click="search"> 搜索</view>
			</view>
		</view>
		
		<view class="searh-history p-30">
			<view class="df-ac mb-30">
				<image src="../../static/imgs/hot.png" mode="" style="width: 40rpx;height:40rpx" class="mr-10"></image>
				<view class="fz30 fw-b c-72">热门搜索</view>
			</view>
			<view class="df wrap">
				<view class="hot-item" v-for="item in 6" :key="item">大码女装连衣裙</view>
				
			</view>
			<view class="df-ac mb-30 p-t-20">
				<image src="../../static/imgs/his.png" mode="" style="width: 40rpx;height:40rpx" class="mr-10"></image>
				<view class="fz30 fw-b c-72">历史记录</view>
			</view>
			<view>
				<view class="his-item" v-for="item in 6" :key="item">大码女装连衣裙</view>
			</view>
			<view class=" df-cc p-t-40">
				<image src="../../static/imgs/del.png" mode="" style="width: 30rpx;height: 30rpx;"></image>
				<view class="c-72 fz24 ml-10">
					清除历史记录
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
			}
		},
		methods: {
			search() {
				this.goRouter('/pages/huodong/list',{keyword:this.keyword});
			},
			goBack() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.page-search {
		.search-header {
			padding: 40rpx 30rpx 0 30rpx;
			.icon-back {
				width: 30rpx;
				height: 30rpx;
				margin-right: 30rpx;
			}

			.search-box {
				flex: 1;
				background-color: #FAFAFA;
				border: 1px solid #C8C8C8;
				border-radius: 14rpx;
				padding: 6rpx;
				position: relative;

				.icon-search {
					width: 30rpx;
					height: 30rpx;
					left: 20rpx;
				}

				input {
					padding-left: 70rpx;
					flex: 1;
					font-size: 24rpx;
				}

				.btn-search {
					background: linear-gradient(90deg, #8663e8, #4f34cc);
					border-radius: 7rpx;
					box-shadow: 0px 7rpx 22rpx -7rpx rgba(79, 52, 204, 0.70);
					font-size: 24rpx;
					text-align: center;
					line-height: 60rpx;
					width: 110rpx;
					height: 60rpx;
					color: #fff;
				}
			}
		}
		.hot-item {
			padding: 20rpx;
			background-color: #F5F5F5;
			color: #727C8E;
			font-size: 22rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
			border-radius: 7rpx;
		}
		.his-item {
			padding: 30rpx 0;
			border-bottom: 1px solid #EBEBEB;
			font-size: 24rpx;
			color: #0C0423;
		}
	}
</style>
